@import "constants.scss";
@import "init.scss";
body{
    background: pink;
}

.mask-wrapper{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    //overflow: scroll;
    overflow-y: scroll;
    display: none;
    z-index: 100;

    .auth-wrapper{
        $authWrapperHeight: 520px;
        $authWrapperWidth: 400px;
        width: $authWrapperWidth;
        height: $authWrapperHeight;
        //background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -$authWrapperWidth/2;
        margin-top: -$authWrapperHeight/2;

        .close-wrapper{
            width: 100%;
            height: 40px;
            background: #fff;

            .close-btn{
                display: inline-block;
                width: 30px;
                height: 30px;
                float: right;
                margin-top: 10px;
                color: $assistFontColor;
                cursor: pointer;
            }
        }

        .auth-inner-wrapper{
            width: 100%;
            height: $authWrapperHeight - 40px;
            position: relative;
            overflow: hidden;

            .scroll-wrapper{
                width: $authWrapperWidth*2;
                //height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                //background: #fff;

                .auth-group{
                    width: $authWrapperWidth;
                    padding: 0 20px 20px;
                    box-sizing: border-box;

                    .top-group{
                        height: 36px;
                        border-bottom: 1px solid $lineColor;
                        line-height: 34px;
                        .title{
                            float: left;
                            color: $mainFontColor;
                            border-bottom: 3px solid $themeColor;
                        }
                        .switch{
                            float: right;
                            color: $themeColor;
                        }
                    }

                    .form-group{
                        margin-top: 20px;
                        .input-group{
                            margin-bottom: 20px;
                            height: 40px;
                            .form-control{
                                border: 1px solid #ccc;
                                padding: 10px;
                                width: 100%;
                                box-sizing: border-box;
                                height: 40px;
                                outline: none;
                            }
                            .remember-label{
                                font-size: 14px;
                            }
                            .submit-btn{
                                width: 100%;
                                height: 40px;
                                background: $themeColor;
                                border: none;
                                color: #fff;
                                cursor: pointer;
                            }
                            .short-input-group{
                                width: 250px;
                                float: left;
                            }
                            .input-group-addon{
                                float: right;
                                width: 100px;
                                .sms-captcha-btn{
                                    width: 100%;
                                    height: 40px;
                                    border: 1px solid $themeColor;
                                    color: $themeColor;
                                    display: inline-block;
                                    text-align: center;
                                    line-height: 40px;
                                    box-sizing: border-box;
                                    cursor: pointer;
                                }
                                .disabled{
                                    color: #ccc;
                                    border-color: #ccc;
                                }
                            }
                        }
                    }
                }

                .signin-group{
                    float: left;
                    background: #fff;
                }
                .signup-group{
                    float: left;
                    background: #fff;
                }
            }
        }
    }
}